<template>
  <div class="flexBox">
    <div v-if="searchItems.name && !showSearchMore" class="searchName">
      <div class="searchBox">
        <SearchChar
          :placeholder="searchItems.name.string"
          :value="(searchValues.name || {}).values || []"
          @change="val => handleSearchChange(searchItems.name, val)"
        />
      </div>
    </div>

    <div v-show="showSearchMore" class="searchName searchMore">
      <!-- <a-button @click="showSearchMore = !showSearchMore">
        更多搜索条件
      </a-button> -->

      <div v-show="showSearchMore" class="searchMoreBox searchContent">
        <!-- <a-divider /> -->
        <div
          v-for="item in searchItems"
          :key="item.name"
          class="searchMoreItem"
        >
          <template v-if="item.type === 'field'">
            <template v-if="item.meta.type === 'selection'">
              {{ item.type }} {{ item.meta.type }}
            </template>
            <template v-else-if="item.meta.type === 'many2one'">
              <SearchMany2one
                :title="item.string"
                :placeholder="item.string"
                :value="(searchValues[item.name] || {}).values || []"
                :options="item.selection"
                @change="val => handleSearchChange(item, val)"
              />
            </template>
            <template v-else>
              <SearchChar
                :title="item.string"
                :placeholder="item.string"
                :value="(searchValues[item.name] || {}).values || []"
                @change="val => handleSearchChange(item, val)"
              />
            </template>
          </template>
          <template v-else-if="item.type === 'filter'">
            <SearchSelect
              v-if="item.selection.length"
              :title="item.string"
              :placeholder="item.string"
              :value="(searchValues[item.name] || {}).values || []"
              :options="item.selection"
              @change="val => handleSearchChange(item, val)"
            />

            <template v-for="item2 in item.date_children">
              <div :key="item2.name">
                <SearchDate
                  :title="item2.string"
                  :value="
                    (
                      ((searchValues[item.name] || {}).date_children || {})[
                        item2.name
                      ] || {}
                    ).value || []
                  "
                  @change="val => handleSearchChange(item2, val)"
                />
              </div>
            </template>
          </template>

          <!-- <a-divider /> -->
        </div>
      </div>
      
      <div class="note">
        当前 过滤条件:
        <a-tag
          v-for="tag in search_tags"
          :key="tag.name"
          closable
          @close="handleClose(tag)"
        >
          {{ tag.label }}
        </a-tag>
      </div>
    </div>

    <div
      v-if="!(Object.keys(searchItems).length === 1 && searchItems.name)"
      style="cursor: pointer"
    >
      <a-button @click="showSearchMore = !showSearchMore" type="primary">
        <span v-if="showSearchMore" class="gjBtn">
          <a-icon type="funnel-plot" style="font-size: 15px" />关闭高级搜索
        </span>
        <span v-else class="gjBtn">
          <a-icon type="funnel-plot" style="font-size: 15px" /> 启用高级搜索
        </span>
      </a-button>
    </div>
  </div>
</template>

<script>
import SearchChar from './SearchChar.vue'
import SearchSelect from './SearchSelect.vue'
import SearchMany2one from './SearchMany2one.vue'
import SearchDate from './SearchDate.vue'

export default {
  name: 'OSearch',

  components: { SearchChar, SearchSelect, SearchMany2one, SearchDate },

  mixins: [],

  props: {
    searchValues: {
      type: Object,
      default: () => {
        return {}
      }
    },

    searchItems: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {
      showSearchMore: false
    }
  },
  computed: {
    search_tags() {
      const ss = Object.values(this.searchValues)
        .filter(tag => tag.values.length)
        .map(tag => {
          if (tag.type === 'field') {
            const str1 = tag.string
            const str2 = tag.values.map(item => item.string).join(', ')
            return {
              ...tag,
              label: `${str1}${str2}`
            }
          } else if (tag.type === 'filter') {
            // console.log(tag.name, tag)
            return {
              ...tag,
              label: tag.values
                .map(item => {
                  // console.log(item)
                  if (item.date) {
                    return `${item.string} ${item.value.join(',')}`
                  } else {
                    return item.string
                  }
                })
                .join(', ')
            }
          }
        })

      return ss
    }
  },
  watch: {
    // 菜单切换时, 触发
    '$route.fullPath': {
      handler: function (/*val*/) {
        // console.log('in watch, $route.fullPath')
        // console.log('watch fullPath')
        this.showSearchMore = false
      },
      deep: true
    }
  },

  async created() {},

  mounted() {},

  methods: {
    handleClose(item) {
      // console.log(item)
      this.$emit('change', item, undefined)
    },
    handleSearchChange(item, value) {
      // console.log(item, value)
      this.$emit('change', item, value)
    }
  }
}
</script>

<style type="text/css" scope>
.flexBox {
  display: flex;
  height: 70px;
  background: white;
  padding: 10px;
}
.searchName {
  width: 30%;
}
.searchBox {
  width: 100%;
}
.searchMoreBox {
  width: 90%;
}
.searchMore {
  display: flex;
  flex-direction: column;
  width: 64%;
}
.searchContent {
  display: flex;
}
.searchMoreItem {
  width: 50%;
}
.note {
  color: gray;
  margin-top: 2px;
}
.gjBtn {
  display: flex !important;
  align-items: center;
}
</style>
